<template>
  <div>
<!--    使用vuex中的全局变量和vuex的计算属性 -->
    <h1>用户管理 --- {{ $store.state.counter }} --- {{$store.getters.countSqrt}} </h1>
    <button @click="plusCounter">共享数据+10</button><br>
    <button @click="minusCounter">共享数据-1</button><br>
    <button @click="multiCounter">共享数据 * 10</button><br>
    <li v-for="(student,index) in students" :key="index">
      {{student.name}} -- {{student.age}}
    </li>
  </div>
</template>

<style scoped>

</style>
<script>

export default {
  name: "User",
  data() {
    return {
      students:[
        {"name":'李泽民', "age": 28},
        {"name":'邓小平', "age": 48},
      ]
    }
  },
  methods:{
    plusCounter(){
      // 调用mutations中定义的修改全局变量的方法
      this.$store.commit("incrCounter",10);
    },
    minusCounter(){
      this.$store.commit("decrCounter");
    },
    multiCounter() {
      this.$store.commit("multiCounter", {name: '李泽民', counter: 10});
    },
  }

}

</script>
